<template>
    <div>

        <el-row class="statistical-form" v-if="listsOne.length != 0">
            <el-col >
                <!-- 标题 -->
                <el-row class="tr">  
                    <el-col :span="4">
                        <div class="th">姓名</div>
                    </el-col>

                     <el-col :span="5">
                        <div class="th">职务</div>
                    </el-col>
                    
                     <el-col :span="3">
                        <div class="th">在岗</div>
                    </el-col>

                     <el-col :span="3">
                        <div class="th">开会</div>
                    </el-col>

                     <el-col :span="3">
                        <div class="th">公差</div>
                    </el-col>

                     <el-col :span="3">
                        <div class="th">请假</div>
                    </el-col>

                    <el-col :span="3">
                        <div class="th">休假</div>
                    </el-col>
                </el-row>
                <!-- 内容 -->
                <el-row class="tr" v-for="(item,index) in listsOne" :key="index">
                    <el-col :span="4">
                        <div class="td">{{item.name}}</div>
                    </el-col>

                     <el-col :span="5">
                        <div class="td">{{item.level}}</div>
                    </el-col>
                    
                     <el-col :span="3">
                        <div class="td">
                            <div class="Circular b0076FB" v-if="item.onwork == 1"></div>
                        </div>
                    </el-col>

                     <el-col :span="3">
                        <div class="td">
                            <div class="Circular b00BDB5" v-if="item.meeting == 1"></div>
                        </div>
                    </el-col>

                     <el-col :span="3">
                        <div class="td">
                            <div class="Circular bFFC01B" v-if="item.trip == 1"></div>
                        </div>
                    </el-col>

                     <el-col :span="3">
                        <div class="td">
                            <div class="Circular bFF2044" v-if="item.offwork == 1"></div>
                        </div>
                    </el-col>

                    <el-col :span="3">
                        <div class="td">
                            <div class="Circular b956AFF" v-if="item.holiday == 1"></div>
                        </div>
                    </el-col>
                </el-row>      
            </el-col>
        </el-row>

        <el-row v-else>
            <div class="zwsj">暂无数据</div>
        </el-row>
    </div>
</template>

<script>
import { lists } from "../../api/api";
export default {
  data() {
    return {
      listsOne: []
    };
  },
  created() {
    this.getlists();
    this.set();
  },
  watch: {
    page(page) {
      this.getlists();
      this.set();
    }
  },
  methods: {
    getlists() {
      lists(this.page).then(res => {
        this.listsOne = res.data.data;
      });
    },
    set() {
      setInterval(() => this.getlists(),120000); //定时器
    }
  },
  props: ["page"]
};
</script>

<style lang="scss" scoped>
.statistical-form {
  text-align: center;
  margin: 20px;
  box-sizing: border-box;
  border-left: 1px solid #86befd;
  border-right: 1px solid #86befd;
  border-bottom: 1px solid #86befd;
  .th {
    height: 36px;
    line-height: 36px;
    background-color: #0076fb;
    border-left: 2px solid #e8f3ff;
    color: #fff;
    overflow: hidden;
  }
  .td {
    height: 36px;
    border-left: 2px solid #e8f3ff;
    line-height: 36px;
    position: relative;
  }
}
.statistical-form .tr:nth-of-type(odd) {
  background-color: #e5f1ff;
}
.Circular {
  width: 15px;
  height: 15px;
  //   background-color: pink;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.c01BF5B {
  color: #01bf5b;
}
.b01BF5B {
  background-color: #01bf5b;
}
.c0076FB {
  color: #0076fb;
}
.b0076FB {
  background-color: #0076fb;
}
.c00BDB5 {
  color: #00bdb5;
}
.b00BDB5 {
  background-color: #00bdb5;
}
.cFFC01B {
  color: #ffc01b;
}
.bFFC01B {
  background-color: #ffc01b;
}
.cFF2044 {
  color: #ff2044;
}
.bFF2044 {
  background-color: #ff2044;
}
.c956AFF {
  color: #956aff;
}
.b956AFF {
  background-color: #956aff;
}

.zwsj {
  text-align: center;
}
</style>



